<template>
    <div class="console-page index">
        <div style="text-align: center;font-size: 20px;font-weight: bold;padding: 20px;">Api Documentation</div>
        <div style="padding:0 100px">
            <div class="item">
                <span class="title">简介</span><span>{{ getApiInfo.description }}</span>
            </div>
            <div class="item">
                <span class="title">作者</span><span>{{ getApiInfo.contact.author }}</span>
            </div>
            <div class="item">
                <span class="title">版本</span><span>{{ getApiInfo.version }}</span>
            </div>
            <div class="item">
                <span class="title">host</span><span>{{ baseUrl }}</span>
            </div>
            <div class="item">
                <span class="title">basePath</span><span>/</span>
            </div>
            <div class="item">
                <span class="title">服务Url</span><span>{{ getApiInfo.termsOfService }}</span>
            </div>
            <div class="item">
                <span class="title">分组名称</span><span>default</span>
            </div>
            <div class="item">
                <span class="title">分组Url</span><span>{{ getApiInfo.server.url }}</span>
            </div>
            <div class="item">
                <span class="title">分组location</span><span>{{ getApiInfo.server.location }}</span>
            </div>
            <div class="item">
                <span class="title">接口统计信息</span>
                <span v-for="method in Object.keys(count)" style="margin-right: 20px;">
                    <span style="margin-right: 10px;">{{ method.toUpperCase() }}</span>
                    <span class="k">{{ count[method] }}</span>
                </span>
            </div>
        </div>
    </div>
</template>

<script setup>
import instance, { storeToRefs } from "@/pinia"
import { baseUrl } from "@/utils/constant"

const { mainStore } = instance

const { getApiInfo, getPaths } = storeToRefs(mainStore)

const count = computed(() => {
    const s = {}
    for (let p of Object.values(getPaths.value)) {
        for (const method of Object.keys(p)) {
            s[method] = (s[method] || 0) + 1
        }
    }
    return s
})

</script>

<style>
.index .title {
    display: inline-block;
    width: 150px;
    font-size: 18px;
    text-align: right;
    padding: 10px 50px 10px 0;
}

.index .item {
    border-bottom: 1px solid #d7d7d7;
}

.index .k {
    background: rgb(16, 142, 233);
    padding: 5px 10px;
    color: white;
    border-radius: 3px;
    min-width: 10px;
    text-align: center;
    display: inline-block;
}
</style>